import { LockOutlined } from '@ant-design/icons';
import { LoginForm, ProFormText } from '@ant-design/pro-components';
import { notification } from 'antd';
import { useContext } from 'react';
import { CONFIG_KEYS } from '../../constants/config';
import { FillContext } from './Fill';

import $style from './style.module.scss';

export const Signin = () => {
  const { onLogin, config } = useContext(FillContext);

  async function handleAuth(password: string) {
    console.log(config[CONFIG_KEYS.PASSWORD], password);
    String(password) === String(config[CONFIG_KEYS.PASSWORD])
      ? onLogin()
      : notification.error({
        message: '密码错误',
      });
  }

  return (
    <div className={$style.auth}>
      <div className={$style.container}>
        <div className={$style.form}>
          <div className={$style.title}>整改监督离线填报工具</div>
          <LoginForm onFinish={async ({ password }: { password: string }) => await handleAuth(password)}>
            <ProFormText.Password
              name="password"
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined className={'prefixIcon'} />,
              }}
              placeholder={'请输入密码'}
              rules={[
                {
                  required: true,
                  message: '请输入密码！',
                },
              ]}
            />
          </LoginForm>
        </div>
      </div>
    </div>
  );
};
